<style src="./index.scss" lang="scss" scoped></style>
<template>
    <header class="page-header-box">
        <div class="page-header__container" :style="headerStyle">
            <div class="page-header__cover" :style="{'background-image': cover ? 'url('+cover+')': ''}"></div>
            <div class="page-header__box">
                <slot></slot>
            </div>
        </div>
    </header>
</template>

<script lang="ts">
import { defineComponent, toRef, computed } from 'vue';
export default defineComponent({
    props: {
        cover: {
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 0
        }
    },
    setup(props) {
        const _height = toRef(props, 'height');
        const headerStyle = computed(() => _height.value === 0 ? {} : { height: _height.value / 100 + "rem" });
        return {
            headerStyle
        };
    }
});
</script>
